<template>
  <view class="contenter">
    <!-- 选择时间 -->
    <view class="u-flex " style="width: 100%" >
      <!-- 选择今天明天后天 -->
<!--      <view class="u-flex" >-->
<!--        <view class="u-flex flex_j_c  active_time" v-for="(data,index) in dateList" :class="[active_time===index?'active_time1':'']" @click="activeChangeTime(data,index)">-->
<!--          <text >{{data.name}}</text>-->
<!--&lt;!&ndash;          <text >{{data.time}}</text>&ndash;&gt;-->
<!--        </view>-->

<!--      </view>-->
      <change-times  @change="confirm"></change-times>
    </view>
    <view class="main">

      <!-- 其他 -->
      <view class="flex-c-s-s" >
        <!-- 标题 -->
        <view class="flex-r-s-c title">
          <view></view>
          <text>上午预约</text>
        </view>
        <view class="u-flex time_list">
          <view class="time_list_view flex-c-c-c" v-for="(v,i) in item_list.morning" :class="{'activeTime':ativeTime == i,'man':v.type === 3 || v.type==2 }" :key="i" @click="changeTime(v,i,1)">
            <text>{{v.time}}</text>
            <view class="is_time flex-c-c-c" v-if="v.type == 3">
              <text>已满</text>
            </view>
            <view class="is_time flex-c-c-c" v-if="v.type == 2">
              <text>未排班</text>
            </view>
          </view>
        </view>
        <!-- 标题 -->
        <view class="flex-r-s-c title">
          <view></view>
          <text>下午预约</text>
        </view>
        <view class="u-flex time_list">
          <view class="time_list_view flex-c-c-c" v-for="(v,i) in item_list.afternoon" :class="{'activeTime':ativeTimeTwo == i,'man':v.type == 3 || v.type==2}" :key="i" @click="changeTime(v,i,2)">
            <text>{{v.time}}</text>
            <view class="is_time flex-c-c-c" v-if="v.type == 3">
              <text>已满</text>
            </view>
            <view class="is_time flex-c-c-c" v-if="v.type == 2">
              <text>未排班</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="xuan u-flex flex_bt">
      <view class="u-flex">
        <view class="newtime">{{activeTime}}{{time || ''}}</view>
        <view class="times">服务时间约30分钟</view>
      </view>
      <view class="submit bt" @click="orderSubmit">确定</view>
    </view>

  </view>
</template>

<script>
import user from "../../api/user_login";
import ChangeTimes from "../../components/item/changeTimes";

export default {
name: "changeTime",
  components: {ChangeTimes},
  data(){
    return{
      type:'',//重选时间
      item_list:[],
      active_time: 0, // 今明后 下标
      itemList:[],
      time:null,//最终选中的时间段
      ativeTime:-1, //上午时间段下标
      ativeTimeTwo:-1, //下午时间段下标
      form:{
        user_id:'',
        service_id:'',
        date:''
      },
      dateList:[
        {name:'今天',time:''},
        {name:'明天',time:''},
        {name:'后天',time:''},
      ]
    }
  },
  computed:{
    activeTime(){
      if(this.active_time === 0) return '今天'
      if(this.active_time === 1) return '明天'
      if(this.active_time === 2) return '后天'
    },
  },
  onLoad(option){
    if(option.type ) this.type = option.type
    this.form.service_id = option.sid || ''
    this.form.user_id = option.id || ''
    this.form.id = option.rid || ''
    this.setData()
    
  },
  //获取今明后
  created(){
    let time = new Date()
    var y = time.getFullYear();
    var month = time.getMonth() + 1;
    var d = time.getDate();
    let d1 = `${y}-0${month}-0${d}`;//今天
    let times = new Date(d1)
    //明天
    let  d2
    d2=times.setDate(times.getDate()+1);
    d2=new Date(times);
    //后天
    let  d3
    d3=times.setDate(times.getDate()+1);
    d3=new Date(times);
    this.dateList[0].time = d1
    this.form.date = d1
    console.log(d1)
    this.dateList[1].time = d2.toLocaleDateString()
    this.dateList[2].time = d3.toLocaleDateString()
  },
  methods:{
  //获取时间段
    setData(){
      let form = {
        rid:this.form.id || '',
        date:this.form.date
      }
      this.$api.timeList(form).then(res => {
        this.item_list  = res.data
      })
    },
  //选择时间段
    changeTime(data,index,type){
      if(data.type == 2){
        return  this.$u.toast('这个时间技师未排班！');
      }
      if(data.type != 3){
        this.time = data.time
        if(type === 1){
          this.ativeTime = index
          this.ativeTimeTwo = -1
        }else {
          this.ativeTimeTwo = index
          this.ativeTime = -1
        }
      }else {
        this.$u.toast('这个时间段已经预约满了！');
      }
    },
    //选择日期
    confirm(time){
      this.form.date = time
      this.setData()
    },
    //跳转预约
    orderSubmit(){
      if(!this.time) return    this.$u.toast('请选择预约时间！');
      this.form.date = `${this.form.date} ${this.time}`
      if(this.type != 1){
        this.$api.serviceConfirm(this.form).then(res => {
          this.list = res.data
          this.$u.toast('提交成功，等待客户付款')
          uni.removeStorage({
            key: 'userId',
            success: function (res) {
            }
          });
          uni.removeStorage({
            key: 'rid',
            success: function (res) {
            }
          });
          this.$u.route({
            url: 'pagesA/orderMank/index',
            params: {
              data:JSON.stringify(res.data)
            }
          });
        })
      }else {
        uni.setStorage({
          key: 'time',
          data:this.form.date,
          success: function () {
            uni.navigateBack({
              delta:1
            })
          }
        });

      }

    },
  },
}
</script>

<style scoped lang="scss">
.main{
  padding: 0 32rpx;

}
.time{
  width: 100%;
  background-color:#FFFFFF;
  padding: 0 32rpx;
  height: 132rpx;
}
.active_time {
  height: 80rpx;
  background: #FFFFFF;
  border: 2rpx solid #E3E3E3;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #7B7B7B;
  width: 218rpx;
  margin-right: 16rpx;

}
.title {
  height: 120rpx;
  width: 100%;

  view {
    height: 36rpx;
    width: 10rpx;
    border-radius: 5rpx;
    background-color: #45806E;
  }

  text {
    font-size: 28rpx;
    font-weight: bold;
    color: #272823;
    -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
    text-stroke: 1 rgba(0, 0, 0, 0);
    margin-left: 15rpx;
  }
}
.time_list {
  width: 100%;
  height: auto;
  flex-wrap: wrap;

  .activeTime{
    background: #45806E !important;
    color: white;
    border: 2rpx solid #45806E ;
  }
  .man{
    background: #EAEAEA !important;
    border: 2rpx solid #CCCCCC !important;
    color: #7B7B7B!important;
  }

  .time_list_view {
    border-radius: 8rpx;
    position: relative;
    margin-right: 12rpx;
    margin-bottom: 20rpx;
    border: 2rpx solid white ;
    background: white;
    width: 160rpx;
    height: 74rpx;
    &:nth-child(4n+0){
      margin-right: 0;
    }

    .is_time {
      position: absolute;
      right: 0;
      top: -13rpx;
      height: 26rpx;
      min-width: 52rpx;
      background-color: #EAEAEA;
      border-radius: 8rpx;

      text {
        font-size: 20rpx;
        color: #45806E;
      }
    }
  }
}
.active_time1 {
  background: #45806E;
  border: 2rpx solid #45806E;
  color: white;
}
.xuan{
  height: 104rpx;
  background: #FFFFFF;
  padding: 0 32rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  .newtime{
    font-size: 32rpx;
    font-weight: bold;
    color: #272823;
    margin-right: 20rpx;
  }
  .times{
    font-size: 24rpx;
    color: $uni-text-color;
  }
  .submit{
    width: 228rpx;
    height: 72rpx;
    line-height: 72rpx;
    margin: 0;
  }
}

</style>